<template>
    <main class="w-full h-full p-6 flex items-center content-center justify-center">
        <section class="leave-container w-4/5 h-full bg-white shadow-md rounded-lg">
        <!-- 这里是请假头 -->
        <section class="leave-container-header mt-6">
            <el-steps :active="1" align-center finish-status="success">
                <el-step title="请假" description="请填写请假信息" />
                <el-step title="审批" description="请等待管理员进行审核" />
                <el-step title="完成" description="您已经完成请假" />
            </el-steps>
        </section>
        <!-- 请假头结束 -->
        <!-- 表单部分开始 -->
        <section class="leave-container-body">
            <el-form :model="leaveModel">
                <el-form-item label="请假原因">
                    <el-input v-model="leaveModel.reason" placeholder="请填写您的请假原因" />
                </el-form-item>
                <el-form-item label="请假类型">
                    <el-select v-model="leaveModel.leaveType" placeholder="请选择您的请假类别">
                        <el-option label="公假" value="1" />
                        <el-option label="事假" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="请假时间">
                    <el-col :span="11">
                        <el-date-picker v-model="leaveModel.startData" type="date" placeholder="请选择开始日期"
                            style="width: 100%" />
                    </el-col>
                    <el-col :span="2" class="text-center">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="11">
                        <el-date-picker v-model="leaveModel.endData" placeholder="请选择结束日期" style="width: 100%" />
                    </el-col>
                </el-form-item>
                <el-form-item label="证明材料">
                    <el-upload class="avatar-uploader"
                        action="/api/user/oss/ImgUpload" 
                        :show-file-list="false"
                        :headers="uploadHeaders"
                        :on-success="handleAvatarSuccess" 
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="请假描述">
                        <el-input v-model="leaveModel.leaveDesc" type="textarea" />
                </el-form-item>
                <el-button type="primary" size="large" style="width:100%">提交审批</el-button>
            </el-form>
        </section>
        <!-- 表单部分结束 -->
    </section>
    </main>

</template>
<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
import { ref,reactive } from 'vue'
import {Session} from '../../utils/storage'
import {insertLeave} from '../../api/leave/index'
const leaveModel = ref({
    reason: '',
    leaveType: '',
    leaveDesc: ''
})

const uploadHeaders=reactive({
    token: Session.get("token")
})

const leaveOptions = ref([
    {
        value: 1,
        label: '事假'
    },
    {
        value: 2,
        label: '公假'
    },
    {
        value: 3,
        label: '竞赛请假'
    }
])
const dateRange = ref(null)
const onSubmit =async () => {
    // await insertLeave()
}
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log(response)
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>
<style lang="scss">
.leave-container {
    min-height: 45rem;
    &-header {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    &-body {
        margin: auto;
        margin-top: 3rem;
        width: 40rem;
    }
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>